<template>
  <u-input
    v-model="searchVal"
    placeholder="请输入内容"
    border="surround"
    shape="circle"
    prefixIcon="search"
    :customStyle="customStyle"
    @input="handleChange"
    @focus="handleFocus"
    @blur="handleBlur"
  >
    <template slot="suffix">
      <view
        class="search-text"
        :style="{ color: searchTextColor || themeColor }"
        >搜索</view
      >
    </template>
  </u-input>
</template>

<script>
import { mapState } from "vuex";

export default {
  props: {
    customStyle: Object,
    searchTextColor: String,
  },
  computed: {
    ...mapState("sp-common/base", ["themeColor"]),
  },
  data() {
    return {
      searchVal: "",
    };
  },
  methods: {
    emitChange() {
      this.$emit("change", this.searchVal);
    },
    handleChange() {
      this.$emit("input", this.searchVal);
      uni.$u.throttle(this.emitChange, 1000, false);
    },
    handleFocus() {
      this.$emit("focus", this.searchVal);
    },
    handleBlur() {
      this.$emit("blur", this.searchVal);
    },
  },
};
</script>

<style scoped></style>
